<template>
    <div class='shoplist'>
        <van-sticky>
        <van-tabs v-model="active" @click="dianji">
            <van-tab v-for="(item,index) in fenlei" :key="index" :title="item.category_name"></van-tab>
        </van-tabs>
        </van-sticky>

        <shopping :shoplist="list"></shopping>
        <!-- <ul class="con">
            <li v-for="item in list" :key="item.product_id">
                <van-image :src="item.product_picture">
                    <template v-slot:loading>
                        <van-loading type="spinner" size="20" />
                    </template>
                </van-image>
                <p>{{item.product_name}}</p>
                <p>￥：{{item.product_price}}元</p>
                <p>{{item.product_intro}}</p>
            </li>
        </ul> -->
    </div>
</template>

<script>
import shopping from "../../components/shopping.vue"
    export default {
        data() {
            return {
                active: 0,
                fenlei: [],
                list: [],
            };
        },
        mounted() {
            this.$axios
                .post("/product/getCategory").then((res) => {
                    console.log(res)
                    this.fenlei = res.data.category
                    // console.log(this.fenlei)
                })
            this.dianji(1);
        },
        methods: {
            dianji() {
                this.$axios
                    .post("/product/getAllProduct").then((res) => {
                        console.log(res)
                        this.list = res.data.Product.filter((item) =>{
                            return item.category_id == this.active +1
                        })
                        // console.log(this.list)
                    })
            }
        },
        components:{
            shopping,
        }
    };
</script>

// <style lang='scss'>
//     .con {
//         margin-top: 10px;
//         li {
//         width: 24%;
//         height: 500px;
//         margin: 3px;
//         float: left;
//         border: 1px solid rgb(221, 222, 224);
//         transition-duration: 0.3s;
//         }
//         li:hover {
//             -webkit-box-shadow: #ccc 0px 10px 10px;
//             -moz-box-shadow: #ccc 0px 10px 10px;
//             box-shadow: #ccc 0px 10px 10px;
//         }
//     }   
// </style>